<template>
	<div class="system-add-menu-container">
		<!-- <el-dialog title="新增类目" v-model="isShowDialog" width="769px"> -->
		<el-dialog title="新增类目" v-model="isShowDialog" width="400px">
			<el-form :model="ruleForm" size="small" label-width="80px">
					<el-row :gutter="30">
					<el-col  class="mb20">
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> -->
						<el-form-item label="类目名称">
							<el-input v-model="ruleForm.categoryName" placeholder="格式：水果" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="30">
					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> -->
						<el-col  class="mb20">
						<el-form-item label="类目排序">
							<el-input-number v-model="ruleForm.sort" controls-position="center" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">新 增</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, getCurrentInstance, computed } from 'vue';
import { useStore } from '/@/store/index';
import { i18n } from '/@/i18n/index';
import IconSelector from '/@/components/iconSelector/index.vue';

import {categoryUpdate} from '/@/api/product/category.ts';

// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
export default {
	name: 'sellerAddCategory',
	components: { IconSelector },
	setup() {
		const { proxy } = getCurrentInstance() as any;

		const store = useStore();
		const state = reactive({
			isShowDialog: false,
			// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
			ruleForm: {
				// categoryId: 0,
				categoryName: '类目名称', 
				sort: 20, // 类目排序

				menuSuperior: [], // 上级菜单
				menuType: 'menu', // 菜单类型
				name: '', // 路由名称
				component: '', // 组件路径
				isLink: false, // 是否外链
				menuSort: 0, // 菜单排序
				path: '', // 路由路径
				redirect: '', // 路由重定向，有子集 children 时
				meta: {
					title: '', // 菜单名称
					icon: '', // 菜单图标
					isHide: false, // 是否隐藏
					isKeepAlive: true, // 是否缓存
					isAffix: false, // 是否固定
					isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
					isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
					roles: '', // 权限标识，取角色管理
				},
				btnPower: '', // 菜单类型为按钮时，权限标识
			},
			menuData: [], // 上级菜单数据
		});

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});


		// 获取 vuex 中的路由
		const getMenuData = (routes) => {
			const arr = [];
			routes.map((val) => {
				val['title'] = i18n.global.t(val.meta.title);
				val['id'] = Math.random();
				arr.push({ ...val });
				if (val.children) getMenuData(val.children);
			});
			return arr;
		};
		// 打开弹窗
		const openDialog = () => {
			state.ruleForm.categoryName = '';
			state.ruleForm.sort = 0;

			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 是否内嵌下拉改变
		const onSelectIframeChange = () => {
			if (state.ruleForm.meta.isIframe) {
				state.ruleForm.isLink = true;
			} else {
				state.ruleForm.isLink = '';
			}
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			let param = {
				categoryName: state.ruleForm.categoryName ,
				sort: state.ruleForm.sort,
				sellerId: store.state.userInfos.userInfos.id
			}
			categoryUpdate(param).then(() => {
				// console.log("爱睡觉的");
				// 重新刷新
				proxy.mittBus.emit('refreshCategoryData');
				closeDialog(); // 关闭弹窗
			}).catch((err:any) =>{
				// retrun ;
			})

			// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
		};
		// 页面加载时
		onMounted(() => {
			// state.menuData = getMenuData(store.state.routesList.routesList);
		});
		return {
			openDialog,
			closeDialog,
			onSelectIframeChange,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>
